<!--
 * @Author: your name
 * @Date: 2020-08-24 13:36:52
 * @LastEditTime: 2020-09-02 17:37:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\src\views\animate\border.vue
-->
<template>
<div class="main">
    <div class="custom-border a-b-hor a-b-vertical">
        测试
    </div>

    <div class="branch-warp">
        <div class="branch-box-wrap"></div>
    </div>

    <div class="test" v-action:add>add test</div>
    <div class="test" v-if="$auth('dashboard.add')">add test</div>

    <div>{{msg.split('').reverse().join('')}}</div>

    <div @click="parentEvent"></div>
    <div v-for="item in map.values()" :key="item">
        <p @click="childEvent">{{item}}</p>
    </div>

    <div class="contentTest">123</div>
</div>
</template>

<script>
let map = new Map([
    ['F', 'no'],
    ['T', 'yes'],
]);
export default {
    beforeRouteEnter(to, from, next) {
        // ...
        console.log('beforeRouteEnter:----');
        console.log('to:', to);
        console.log('from:', from);
        console.log('next:', next);
        next();
    },
    beforeRouteUptate(to, from, next) {
        console.log('beforeRouteUptate:----');
        console.log('to:', to);
        console.log('from:', from);
        console.log('next:', next);
        next();
    },
    beforeRouteLeave(to, from, next) {
        console.log('beforeRouteLeave:----');
        console.log('to:', to);
        console.log('from:', from);
        console.log('next:', next);
        next();
    },
    activated() {
        console.log('activated');
    },
    deactivated(){
        console.log('deactivated');
    },
    created() {
        console.log('created');
    },
    mounted() {
        console.log('this.$route:', this.$route);
        // console.log('this.$router:', this.$router);
        console.log("mounted");
        // console.log('$auth:', this.$auth('add'));
        // console.log('$auth:', this.$enum('type'));
        console.log('this.$store=================');
        console.log(this.$store);
    },
    data() {
        return {
            msg: 'hello',
            map
        }
    },
    methods: {
        parentEvent() {
            console.log('parentEvent');
        },
        childEvent() {
            console.log('childEvent');
        }
    }
    // data() {
    //     return {
    //         msg: 'hello',
    //         map
    //     }
    // }
}
</script>

<style lang="less">
.custom-border {
    width: 10vw;
    position: relative;
    line-height: 3em;
    overflow: hidden;
    display: inline-flex;

}

.a-b-hor::after {
    content: '';
    border-top: 5px dashed #5373EA;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    animation: mymove 3s linear infinite;
}

.a-b-vertical::before {
    content: '';
    border-right: 5px dashed #5373EA;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    margin: 0 auto;
    margin-left: -3px;
    z-index: 0;
    height: 200%;
    animation: mymoveVer 3s linear infinite;
}

@keyframes mymove {
    from {
        left: -100%;
    }

    to {
        left: 0%;
    }
}

@keyframes mymoveVer {
    from {
        top: -100%;
    }

    to {
        top: 0%;
    }
}

.contentTest::after {
    content: 'string';
    color: red;
}
</style>
